<template>
  <el-form
    label-suffix=":"
    v-loading="loading"
    
    :model="formData"
    :rules="type == 'add' || type == 'edit'|| type == 'feedback' || type == 'copy' ? formRules : ''"
    ref="formRef"
    label-width="120px"
  >
      <vp-card>
        <template #header>
          <vp-label zh="基本信息" en="Basic Info" />
        </template>
        <el-row>
           <vp-col :span="4" >
              <el-form-item prop="bh">
                <template #label><vp-label zh="问题编号" en="Problem No." /></template>
                <el-input maxlength="100"
                v-model.trim="formData.bh"
                placeholder="不填写则自动生成"
                v-if="type === 'add' || type === 'edit' || type == 'copy'"
              />
              <sapn v-else>{{ formData.bh }}</sapn>
              </el-form-item>
          </vp-col>
          <vp-col :span="4">
            <el-form-item prop="jcrq">
              <template #label><vp-label zh="检查日期" en="Insp. Date"/></template>
              <el-date-picker
                v-model="formData.jcrq"
                type="date"
                style="width: 100%"
                value-format="YYYY-MM-DD"
                v-if="type === 'add' || type === 'edit' || type == 'copy'"
              ></el-date-picker>
              <span v-else>{{ formData.jcrq }}</span>
            </el-form-item>
          </vp-col>
          <vp-col :span="4">
            <el-form-item prop="zrbm">
              <template #label><vp-label zh="责任部门" en="Resp. Dept."/></template>
              <el-input
                  v-model="formData.zrbm"
                  readonly
                  v-if="type === 'add' || type === 'edit' || type == 'copy'"
                >
                  <template #append>
                    <el-button @click="handleSearchDprt"><SvgIcon name="ele-Search"/></el-button>
                  </template>
              </el-input>
              <span v-else>{{ formData.zrbm }}</span>
            </el-form-item>
          </vp-col>
          <vp-col :span="4" >
            <el-form-item prop="fkr" >
              <template #label><vp-label zh="反馈人" en="Recipients"/></template>
                  <el-input
                    v-model="formData.fkr"
                    @blur="formData.fkr = $event.target.value.trim()"
                    maxlength="1300"
                    readonly
                    v-if="(type === 'add' || type === 'edit' || type == 'copy')"
                  >
                  <template #append>
                    <el-button @click="handleSearchFkr"><SvgIcon name="ele-Search"/></el-button>
                  </template>
                  </el-input>
                  <span v-else>{{ formData.fkr }}</span>
            </el-form-item>
          </vp-col>
      </el-row>
      <el-row >
          <vp-col :span="4" >
              <el-form-item prop="jcdw">
                <template #label><vp-label zh="检查单位" en="Insp. Unit"/></template>
                <el-input maxlength="100"
                v-model.trim="formData.jcdw"
                v-if="type === 'add' || type === 'edit' || type == 'copy'"
              />
              <sapn v-else>{{ formData.jcdw }}</sapn>
              </el-form-item>
          </vp-col>
          <vp-col :span="2" >
              <el-form-item prop="jcry">
                <template #label><vp-label zh="检查人员" en="Insp. Person"/></template>
                <el-input maxlength="100"
                v-model.trim="formData.jcry"
                v-if="type === 'add' || type === 'edit' || type == 'copy'"
              />
              <sapn v-else>{{ formData.jcry }}</sapn>
              </el-form-item>
          </vp-col>
      </el-row> 
      <el-row >
          <vp-col :span="4" >
              <el-form-item prop="jcdd">
                <template #label><vp-label zh="检查地点" en="Insp. Location"/></template>
                <el-input maxlength="100"
                v-model.trim="formData.jcdd"
                v-if="type === 'add' || type === 'edit' || type == 'copy'"
              />
              <sapn v-else>{{ formData.jcdd }}</sapn>
              </el-form-item>
          </vp-col>
          <vp-col :span="4" >
              <el-form-item prop="cfxbs">
                <template #label><vp-label zh="是否重复性问题" en="Repetitive Issue"/></template>
                  <el-radio-group v-model="formData.cfxbs" v-if="type === 'add' || type === 'edit' || type == 'copy' ">
                      <el-radio :label="1">是 YES</el-radio>
                      <el-radio :label="0">否 NO</el-radio>
                  </el-radio-group>
                  <span v-else>{{ formData.cfxbs == 1 ? '是 YES' : formData.cfxbs == 0 ? '否 NO'  : '' }}</span>
              </el-form-item>
          </vp-col>
          <vp-col :span="4" >
            <el-form-item prop="wtlb">
              <template #label><vp-label zh="问题类别" en="Problem Cat."/></template>
							<DictSelect 
								:lxid='2011'
								:selectedId="formData.wtlb"
								@dictSelected='(data: any) => {formData.wtlb = data}'
                v-if="type === 'add' || type === 'edit' || type == 'copy' "
								class="w100"
							/>
              <sapn v-else>{{ formData.wtlb }}</sapn>
						</el-form-item>
          </vp-col>
          <vp-col :span="4" >
            <el-form-item prop="wtfj">
              <template #label><vp-label zh="问题分级" en="Problem Rating"/></template>
							<DictSelect 
								:lxid='2005'
								:selectedId="formData.wtfj"
								@dictSelected='(data: any) => {formData.wtfj = data}'
                v-if="type === 'add' || type === 'edit' || type == 'copy' "
								class="w100"
							/>
              <sapn v-else>{{ formData.wtfj }}</sapn>
						</el-form-item>
          </vp-col>
        </el-row> 
        <el-row>
          <vp-col :span="4" >
            <el-form-item prop="sszy">
              <template #label><vp-label zh="所属专业" en="Specialty"/></template>
							<DictSelect 
								:lxid='2006'
								:selectedId="formData.sszy"
								@dictSelected='(data: any) => {formData.sszy = data}'
								class="w100"
                v-if="type === 'add' || type === 'edit' || type == 'copy' "
							/>
              <sapn v-else>{{ formData.sszy }}</sapn>
						</el-form-item>
          </vp-col>
        <vp-col :span="4" >
            <el-form-item prop="zgxz">
              <template #label><vp-label zh="整改性质" en="Nature"/></template>
							<DictSelect 
								:lxid='2007'
								:selectedId="formData.zgxz"
								@dictSelected='(data: any) => {formData.zgxz = data}'
								class="w100"
                v-if="type === 'add' || type === 'edit' || type == 'copy' "
							/>
              <sapn v-else>{{ formData.zgxz }}</sapn>
						</el-form-item>
          </vp-col>
          <vp-col :span="4">
            <el-form-item prop="csfkqx">
              <template #label><vp-label zh="措施反馈期限" en="Feedback Deadline"/></template>
              <el-date-picker
                v-model="formData.csfkqx"
                type="date"
                style="width: 100%"
                value-format="YYYY-MM-DD"
                v-if="type === 'add' || type === 'edit' || type == 'copy'"
              ></el-date-picker>
              <span v-else>{{ formData.csfkqx }}</span>
            </el-form-item>
          </vp-col>
          <vp-col :span="4">
            <el-form-item prop="zgwcqx">
              <template #label><vp-label zh="整改完成期限" en="Rect. Deadline"/></template>
              <el-date-picker
                v-model="formData.zgwcqx"
                type="date"
                style="width: 100%"
                value-format="YYYY-MM-DD"
                v-if="type === 'add' || type === 'edit' || type == 'copy'"
              ></el-date-picker>
              <span v-else>{{ formData.zgwcqx }}</span>
            </el-form-item>
          </vp-col>
      </el-row>
      <el-row>
          <vp-col :span="1">
            <el-form-item prop="qxms" >
              <template #label><vp-label zh="期限描述" en="Deadline Desc."/></template>
                <el-input
                    v-model="formData.qxms"
                    :autosize="{ minRows: 2}"
                    type="textarea"
                    maxlength="1300"
                    v-if="type === 'add' || type === 'edit' || type == 'copy' "
                  ></el-input>
                  <span v-else  >{{ formData.qxms }}</span>
            </el-form-item>
          </vp-col>
      </el-row>
      <el-row>
          <vp-col :span="1">
            <el-form-item  prop="wtms" >
              <template #label><vp-label zh="问题描述" en="Problem Desc."/></template>
                <el-input
                    v-model="formData.wtms"
                    :autosize="{ minRows: 3}"
                    type="textarea"
                    maxlength="1300"
                    v-if="type === 'add' || type === 'edit' || type == 'copy'"
                  ></el-input>
                  <span v-else  >{{ formData.wtms }}</span>
            </el-form-item>
          </vp-col>
      </el-row>
    </vp-card>
    <el-row>
        <FileListCard
          :readOnly="type !== 'add' && type !== 'edit' && type != 'copy'"
          :attachmentList.sync="formData.attachments"
          @attachmentListEmit="getAttachmentListEmit($event, 1)"
        >
        </FileListCard>
    </el-row>
    <vp-card v-if="type !== 'add' && type !== 'edit' && type !== 'copy'">
        <template #header>
          <vp-label zh="原因分析" en="Cause Analysis"/>
        </template>
        <el-row>
          <vp-col :span="1">
            <el-form-item prop="zjyyfx" :class="type == 'feedback' ? 'is-required' : ''">
              <template #label><vp-label zh="直接原因分析" en="Direct Cause Analysis"/></template>
              <el-input
                    v-model="formData.zjyyfx"
                    :autosize="{ minRows: 3}"
                    maxlength="1300"
                    type="textarea"
                    v-if="type === 'feedback' "
                  ></el-input>
                  <span v-else  >{{ formData.zjyyfx }}</span>
            </el-form-item>
          </vp-col>
      </el-row>
      <el-row>
          <vp-col :span="1">
            <el-form-item prop="xtyyfx" >
              <template #label><vp-label zh="系统原因分析" en="System Cause Analysis"/></template>
                <el-input
                    v-model="formData.xtyyfx"
                    :autosize="{ minRows: 3}"
                    type="textarea"
                    v-if="type === 'feedback' "
                  ></el-input>
                  <span v-else  >{{ formData.xtyyfx }}</span>
            </el-form-item>
          </vp-col>
      </el-row>
      <el-row>
          <vp-col :span="1">
            <el-form-item prop="qtyyfx" >
              <template #label><vp-label zh="其他原因分析" en="Other Cause Analysis"/></template>
                <el-input
                    v-model="formData.qtyyfx"
                    :autosize="{ minRows: 3}"
                    type="textarea"
                    v-if="type === 'feedback' "
                  ></el-input>
                  <span v-else  >{{ formData.qtyyfx }}</span>
            </el-form-item>
          </vp-col>
      </el-row>
    </vp-card>
    <vp-card v-if="type !== 'add' && type !== 'edit' && type !== 'copy' ">
        <template #header>
          <vp-label zh="整改措施" en="Rectification Measures"/>
        </template>
        <el-row>
          <vp-col :span="1">
            <el-form-item prop="hffhxcs" >
              <template #label><vp-label zh="恢复符合性措施" en="Restoration Measures"/></template>
                <el-input
                    v-model="formData.hffhxcs"
                    :autosize="{ minRows: 3}"
                    maxlength="1300"
                    type="textarea"
                    v-if="type === 'feedback' "
                  ></el-input>
                  <span v-else  >{{ formData.hffhxcs }}</span>
            </el-form-item>
          </vp-col>
      </el-row>
      <el-row>
          <vp-col :span="1">
            <el-form-item prop="yfxcs" >
              <template #label><vp-label zh="预防性措施" en="Preventive Measures"/></template>
                <el-input
                    v-model="formData.yfxcs"
                    :autosize="{ minRows: 3}"
                    type="textarea"
                    v-if="type === 'feedback' "
                  ></el-input>
                  <span v-else  >{{ formData.yfxcs }}</span>
            </el-form-item>
          </vp-col>
      </el-row>
      <el-row>
          <vp-col :span="4">
            <el-form-item prop="jhwcsj" >
              <template #label><vp-label zh="计划完成时间" en="Planned Time"/></template>
              <el-date-picker
                v-model="formData.jhwcsj"
                type="date"
                style="width: 100%"
                value-format="YYYY-MM-DD"
                v-if="type === 'feedback'"
              ></el-date-picker>
              <span v-else>{{ formData.jhwcsj }}</span>
            </el-form-item>
          </vp-col>
        </el-row>
        <el-row>
          <vp-col :span="1">
            <el-form-item prop="jhwcqksm" :label-width="140">
              <template #label><vp-label zh="计划完成情况说明" en="Planned Completion Status Description"/></template>
                <el-input
                    v-model="formData.jhwcqksm"
                    :autosize="{ minRows: 3}"
                    maxlength="1300"
                    type="textarea"
                    v-if="type =='feedback' "
                  ></el-input>
                  <span v-else  >{{ formData.jhwcqksm }}</span>
            </el-form-item>
          </vp-col>
        </el-row>
    </vp-card>
    <vp-card v-if="type == 'feedback2' || type == 'valid' || type == 'view'">
        <template #header>
          <vp-label zh="整改完成情况" en="Rectification Completion Status"/>
        </template>
        <el-row>
          <vp-col :span="4">
            <el-form-item prop="sjwcsj" :label-width="140">
              <template #label><vp-label zh="实际完成时间" en="Actual Time"/></template>
              <el-date-picker
                v-model="formData.sjwcsj"
                type="date"
                style="width: 100%"
                value-format="YYYY-MM-DD"
                v-if="type === 'feedback2'"
              ></el-date-picker>
              <span v-else>{{ formData.sjwcsj }}</span>
            </el-form-item>
          </vp-col>
        </el-row>
        <el-row>
          <vp-col :span="1">
            <el-form-item prop="sjwcqksm" :label-width="140">
              <template #label><vp-label zh="实际完成情况说明" en="Actual Completion Status Description"/></template>
                <el-input
                    v-model="formData.sjwcqksm"
                    :autosize="{ minRows: 3}"
                    maxlength="1300"
                    type="textarea"
                    v-if="type =='feedback2' "
                  ></el-input>
                  <span v-else  >{{ formData.sjwcqksm }}</span>
            </el-form-item>
          </vp-col>
        </el-row>
        <el-row>
          <vp-col :span="4" >
              <el-form-item prop="zgzj" :label-width="140" :class="type == 'feedback2' ? 'is-required' : ''"
              :rules="type == 'feedback2' ? [validateUtils.notNull] : []">
              <template #label><vp-label zh="整改资金" en="Rectification Fund"/></template>
                  <el-input maxlength="100"
                  v-model.trim="formData.zgzj"
                  v-if="type =='feedback2' "
                />
              <sapn v-else>{{ formData.zgzj }}</sapn>
              </el-form-item>
          </vp-col>
        </el-row>
        <el-row>
          <vp-col :span="1">
            <el-form-item prop="yjya" :label-width="140" :class="type == 'feedback2' ? 'is-required' : ''"
            :rules="type == 'feedback2' ? [validateUtils.notNull] : []">
              <template #label><vp-label zh="应急预案" en="Emergency Plan"/></template>
                <el-input
                    v-model="formData.yjya"
                    :autosize="{ minRows: 3}"
                    maxlength="1300"
                    type="textarea"
                    v-if="type =='feedback2' "
                  ></el-input>
                  <span v-else  >{{ formData.yjya }}</span>
            </el-form-item>
          </vp-col>
        </el-row>
        <el-row>
        <FileListCard
          class="mt4 w100"
          v-if="type == 'feedback2' || type == 'valid' || type == 'view'"
          :readOnly="type !== 'feedback2'"
          :attachmentList.sync="formData.zgqkAttachemts"
          @attachmentListEmit="getAttachmentListEmit($event, 2)"
        >
          <template #header>
            <vp-label zh="附件列表（上传证明材料）" en="Attachment List (Uploaded Supporting Materials)"/>
          </template>
        </FileListCard>
    </el-row>
    </vp-card>
    <vp-card v-if="type == 'view'">
        <template #header>
           <vp-label zh="治理验证情况" en="Governance Verification Status"/>
          </template>
        <el-row >
          <vp-col :span="1" >
            <el-form-item prop="yzqk">
              <template #label><vp-label zh="验证情况" en="Verification Status"/></template>
             <span>{{ formData.yzqk }}</span>
            </el-form-item>
          </vp-col>
        </el-row>
      </vp-card>
  </el-form>
  <UserDialog ref="userDialogRef"></UserDialog>
  <DepartmentDialog ref="departmentRef"></DepartmentDialog>
</template>
<script lang="ts">
import { defineComponent, onMounted, reactive, ref, toRefs } from "vue";
import { useI18n } from "vue-i18n";
import { useRouter } from "vue-router";
import request from "/@/utils/request";
import validateUtils from "/@/utils/validateUtils";
import FileListCard from '/@/components/vp/file/VpFileListCard.vue';
import UserDialog from '/@/components/vp/user/VpUserDialog.vue';
import { i18n } from "/@/i18n";
import DepartmentDialog from '/@/components/vp/department/VpDepartmentDialog.vue';
import DictSelect from '/@/components/vp/dict/VpDictSelect.vue';

export default defineComponent({
  name: "deptRectificationCommon",
  components: {
    FileListCard,
    UserDialog,
    DepartmentDialog,
    DictSelect,
  },
  props: {
    id: String,
    type: String,
    jb:Number
  },
  emits: ["dataEmits"],
  setup(props, context) {
    const state = reactive({
      type: "add",
      loading: false,
      saveLoading: false,
      termInputType: 1,
      formData: {
        id: "",
        jb: null,
        bh: "",
        jcrq: "",
        zrbmid: "",
        zrbm: "",
        creatorDeptCode: '',
        fkrid: "",
        fkr: "",
        jcdw: "",
        jcry: "",
        jcdd: "",
        cfxbs: null,
        wtfj: "",
        sszy: "",
        zgxz: "",
        csfkqx: "",
        zgwcqx: "",
        qxms: "",
        wtms: "",
        zjyyfx: "",
        xtyyfx: "",
        qtyyfx: "",
        hffhxcs: "",
        yfxcs: "",
        jhwcsj: "",
        jhwcqksm: "",
        sjwcsj: "",
        sjwcqksm: "",
        wtlb: "",
        zgzj: "",
        yjya: "",
        zgqkAttachemts: [],
        attachments: [],
      },
      formRules: {
        jcrq: [validateUtils.notNull],
        zrbm: [validateUtils.notNull],
        fkr: [validateUtils.notNull],
        zjyyfx: [{
              message: '必填/Required.',
              validator: (rule: any, value: any, callback: any)=>{
                  if (props.type == 'feedback' && !state.formData.zjyyfx) {
                      callback(new Error());
                  } else {
                      callback();
                  }
              },
          }],
          zgzj: [{
              message: '必填/Required.',
              validator: (rule: any, value: any, callback: any)=>{
                  if (props.type == 'feedback2' && !state.formData.zgzj) {
                      callback(new Error());
                  } else {
                      callback();
                  }
              },
          }],
          yjya: [{
              message: '必填/Required.',
              validator: (rule: any, value: any, callback: any)=>{
                  if (props.type == 'feedback2' && !state.formData.yjya) {
                      callback(new Error());
                  } else {
                      callback();
                  }
              },
          }],
      },
    });

    const initFormData = () => {
      state.formData = {
        id: "",
        jb: null,
        bh: "",
        jcrq: "",
        zrbmid: "",
        zrbm: "",
        creatorDeptCode: '',
        fkrid: "",
        fkr: "",
        jcdw: "",
        jcry: "",
        jcdd: "",
        cfxbs: null,
        wtfj: "",
        sszy: "",
        zgxz: "",
        csfkqx: "",
        zgwcqx: "",
        qxms: "",
        wtms: "",
        zjyyfx: "",
        xtyyfx: "",
        qtyyfx: "",
        hffhxcs: "",
        yfxcs: "",
        jhwcsj: "",
        jhwcqksm: "",
        sjwcsj: "",
        sjwcqksm: "",
        wtlb: "",
        zgzj: "",
        yjya: "",
        zgqkAttachemts: [],
        attachments: [],
      };
    };

    const editDialogRef = ref();
    const formRef = ref();
    const router = useRouter();
    const { t } = useI18n();

    const handleOpen = (type: string, id: string, jb: number) => {
      state.type = type;
      initFormData();
      if (type != "add") {
        state.loading = true;
        if(type == 'copy'){
          request.get(`/safe/deptRectification/copy/${id}`).then((res) => {
          state.formData = {
            ...state.formData,
            ...res.data,
          };
          state.formData.bh = '';
          state.formData.fbbid = state.formData.id;
          state.formData.id = '';
          state.loading = false;
          context.emit("dataEmits", state.formData);
        });
        }else {
          request.get(`/safe/deptRectification/${id}`).then((res) => {
            state.formData = {
              ...state.formData,
              ...res.data,
            };
            state.loading = false;
            context.emit("dataEmits", state.formData);
          });
        }
      }else{
        state.formData.jb = jb;
      }
    };


    onMounted(() => {
      handleOpen(props.type || "add", props.id || "", props.jb || 10);
    });

    const getAttachmentListEmit = (list: any, lx: number) => {
      if(lx == 2){
        state.formData.zgqkAttachemts = list;
      }else{
        state.formData.attachments = list;
      }
    };

    const getData = (zt : number): Promise<any>=>{
      let promise = new Promise((resolve, reject) => {
          if(zt == 10){
            if(state.formData.jb == 10){
              formRef.value.validateField(['zrbm'], (valid: boolean) => {
                  if (valid) {
                      resolve({
                          ...state.formData
                      });
                  } else {
                      reject();
                  }
              })
            }else {
              resolve({
                    ...state.formData
                });
                return;
            }
          }else if(zt == -1) {
            resolve({
                  ...state.formData
              });
          }else{
            formRef.value.validate((valid: boolean) => {
              if (valid) {
                  resolve({
                      ...state.formData
                  });
              } else {
                  reject();
              }
            }) 
          }
      })
      return promise; 
    }

    const userDialogRef = ref();

    const handleSearchFkr = () =>{
      userDialogRef.value.handleOpen({
        type: 1,
        multi: false,
        selected: state.formData.bmshr,
        callback: (data: any) => {
          state.formData.fkrid = data.yhid;
          state.formData.fkr = data.xm;
        }
      });
    }
    const departmentRef = ref();
    const handleSearchDprt =() =>{
        departmentRef.value.handleOpen({
          selectedId: state.formData.zrbmid,
          callback: (data: any) => {
            state.formData.zrbmid = data.id;
            state.formData.zrbm = data.dprtname;
            state.formData.creatorDeptCode = data.dprtcode;
          }
        });
      }

    return {
      ...toRefs(state),
      ...toRefs(props),
      editDialogRef,
      formRef,
      handleOpen,
      getAttachmentListEmit,
      getData,
      userDialogRef,
      handleSearchFkr,
      handleSearchDprt,
      departmentRef,
      validateUtils,
    };
  },
});
</script>

<style lang="scss" scoped>
.drawer {
  :deep(.el-checkbox__label) {
    min-width: 80px;
  }
}
.el-space {
  margin-top: 0px;
}
:deep(.el-space__item) {
    padding-bottom: 0px !important;
     margin-right: 0px !important;
}
:deep(.el-divider--horizontal){
    display: block;
    height: 1px;
    width: 100%;
    margin: 0;
    border-top: 1px var(--el-border-color) var(--el-border-style);
}
:deep(.ycds-class .el-form-item__label) {
  width: 200px !important;
}
</style>
